<template>
  <el-card>
    <el-form :inline="true" :model="user">
      <el-form-item label="昵称">
        <el-input v-model="user.name" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item v-if="mailChecked" label="邮箱">
        <el-input v-model="user.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="内容" style="display:block;">
        <el-input v-model="user.content" style="width:100%;display:block;" type="textarea" placeholder="❤️勾选下方选框，填写邮箱可以收到回复提醒哦！">
        </el-input>
      </el-form-item>
      <br>
      <el-form-item v-if="!$store.state.isLogin">
        <el-checkbox v-model="mailChecked">发送邮箱验证码：</el-checkbox>
        <span style="color: #a6a9ad;">填写邮箱可以收到回复哦！</span>
      </el-form-item>
      <br>
      <el-form-item class="submit">
        <el-button type="primary" @click="postMsg">{{ tip || '提交' }}</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'MsgForm',
  props: {
    tip: String,
  },
  data() {
    return {
      // 匿名注册
      mailChecked: false,
      user: {
        userId: '',
        name: '',
        email: '',
        content: '',
      },
    }
  },
  mounted() {
    this.getUser()
  },
  watch: {
    '$store.state.isLogin': function (newVal) {
      this.getUser()
    }
  },
  methods: {
    // 提交
    async postMsg() {
      // 判断是否输入内容
      if(!this.user.content){
          this.$message.warning('请输入内容')
          return false
      }
      // 判断是否是匿名提交 ，匿名提交：不经过邮箱校验
      if (!this.mailChecked && !this.$store.state.isLogin) {
        // 注册用户
        const res = await this.$api.httpRegisterAnonymity({ name: this.user.name })
        const { code, data, message } = res
        if (code == 200) {
          this.$message.success('已自动为您注册账户')
          this.$notify({
            title: '您的账户为：' + data.user.email,
            message: '初始密码为：123456',
            type: 'success',
            duration: 0,
          })

          // 保留用户登录信息
          this.saveUser(data.token, data.user)
        } else {
          this.$message.error(message)
        }
      }

      // 如果未登录则弹出登录框
      if (!this.$store.state.isLogin) {
        this.$bus.emit('showLogin', this.user)
      } else {
        let content = this.user.content.replace(/\n/g, '<br>')
        this.$emit('submit', content)
        this.user.content = ''
      }

    },
    // 保存用户信息
    saveUser(token, user) {
      // 存储token
      this.$storage.setSession('token', token)
      this.$store.commit('login', {
        userId: user.userId,
        name: user.name,
        email: user.email,
      })
      this.$bus.emit('isLogin')
    },
    // 获取用户信息
    getUser() {
      const user = this.$store.state.user
      if (user.userId) {
        this.isLogin = true
        this.user.userId = user.userId
        this.user.name = user.name
        this.user.email = user.email
      }
    }
  },
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__content {
  width: 100%;
}

.submit {
  vertical-align: bottom;
}
</style>